﻿//Placed outside .ready for scoping
var targetX, targetY;
var tagCounter = 0;
var tagIP = "";
var tagMac = "";
var tagKisi = "";
var tagBirim_Adi = "";
var tagKat_No = "";
var tagOda_No = "";
$(document).ready(function () {
    //Dynamically wrap image
    $(".fotoEtiket").wrap('<div id="tag-wrapper"></div>');

    //Dynamically size wrapper div based on image dimensions
    $("#tag-wrapper").css({ width: "1000px", height: "600px" });

    //Append #tag-target content and #tag-input content
    $("#tag-wrapper").append('<div id="tag-target"></div><div id="tag-input"><label for="tag-name">Cihazın Adını Giriniz : </label><input id="tag-name" type="text" /><label for="tag-ip">Cihazın IP Bilgisini Giriniz : </label><input id="tag-ip" type="text" /><label for="tag-mac">Cihazın MAC Adresini Giriniz : </label><input id="tag-mac" type="text" /><label for="tag-kisi">Cihazdan Sorumlu Kişinin Adini Soyadini Giriniz (Boş Bırakabilirsiniz) : </label><input id="tag-kisi" type="text" /><button type="button">Ekle</button><button type="reset">iptal</button></div>');
    $("#tag-input").append($("#arkadas").html());

    //    $(".arkadas li").click(function() {
    //        var id = $(this).attr("id");
    //        var text = $(this).text();
    //        id = id.split('-')[1];
    //        submitTag(id + "$" + text);
    //    });

    //    $("#tag-name").keyup(function(e) {
    //        var deger = $(this).val();
    //        var aranacak;
    //        $(".arkadas li").each(function() {
    //            aranacak = $(this).text();
    //            if (aranacak.substring(0, deger.length) != deger) {
    //                $(this).css("display", "none");
    //            }
    //            else {
    //                $(this).css("display", "");
    //            }
    //            //$("#cikti").text(aranacak + " - " + deger);
    //        });
    //    });

    //$("#tag-wrapper").click(function(e){
    $(".fotoEtiket").click(function (e) {
        //Determine area within element that mouse was clicked
        mouseX = e.pageX - $("#tag-wrapper").offset().left ;
        mouseY = e.pageY - $("#tag-wrapper").offset().top;

        //Get height and width of #tag-target
        targetWidth = $("#tag-target").outerWidth();
        targetHeight = $("#tag-target").outerHeight();

        //Determine position for #tag-target
        targetX = mouseX - targetWidth / 2 ;
        targetY = mouseY - targetHeight / 2 ;

        //Determine position for #tag-input
        inputX = mouseX + targetWidth / 2;
        inputY = mouseY - targetHeight / 2;

        //Animate if second click, else position and fade in for first click
        if ($("#tag-target").css("display") == "block") {
            $("#tag-target").animate({ left: targetX, top: targetY }, 500);
            $("#tag-input").animate({ left: inputX, top: inputY }, 500);
        } else {
            $("#tag-target").css({ left: targetX, top: targetY }).fadeIn();
            $("#tag-input").css({ left: inputX, top: inputY }).fadeIn();
        }

        //Give input focus
        $("#tag-name").focus();
    });

    //If cancel button is clicked
    $('button[type="reset"]').click(function () {
        closeTagInput();
    });

    //If enter button is clicked within #tag-input
    $("#tag-name").keyup(function (e) {
        if (e.keyCode == 13) submitTag();
    });

    //If submit button is clicked
    $('button[type="button"]').click(function () {
        submitTag();
    });

});

function submitTag(deger) {
    var obj = document.getElementById("ctl00_ContentPlaceHolder1_drplistBirimler");
    var obj2 = document.getElementById("ctl00_ContentPlaceHolder1_drplistKatlar");
    var obj3 = document.getElementById("ctl00_ContentPlaceHolder1_txtOdalar");
    if (deger == null) {
        tagValue = $("#tag-name").val();
        tagIP = $("#tag-ip").val();
        tagMac = $("#tag-mac").val();
        tagKisi = $("#tag-kisi").val();
        tagBirim_Adi = obj.value;
        tagKat_No = obj2.value;
        tagOda_No = obj3.value;
    }
    else {
        tagValue = deger.split('$')[1];
    }

    //Adds a new list item below image. Also adds events inline since they are dynamically created after page load
    $("#tag-wrapper").after('<p id="hotspot-item-' + tagCounter + '">' + tagValue + ' <span class="remove" onclick="removeTag(' + tagCounter + ')" onmouseover="showTag(' + tagCounter + ')" onmouseout="hideTag(' + tagCounter + ')">(Kaldır)</span></p>');

    //Adds a new hotspot to image
    $("#tag-wrapper").append('<div id="hotspot-' + tagCounter + '" class="hotspot" style="left:' + targetX + 'px; top:' + targetY + 'px;"><span>' + tagValue + '</span></div>');

    ajaxPage("ajaxPage/fotoEtiket.aspx?Cihaz_Adi=" + tagValue + "&IP_Adresi=" + tagIP + "&Mac_Adresi=" + tagMac + "&Kisi=" + tagKisi + "&Birim_Adi=" + tagBirim_Adi + "&Kat_No=" + tagKat_No + "&Oda_No=" + tagOda_No + "&Top=" + targetY + "px&Left=" + targetX + "px&Islem=Ekle");

    tagCounter++;

    $(".arkadas li").each(function() {
        $(this).css("display", "");
    });
    $(".arkadas li").css("display", "");
    closeTagInput();
}

function closeTagInput() {
    $("#tag-target").fadeOut();
    $("#tag-input").fadeOut();
    $("#tag-name").val("");
    $("#tag-ip").val("");
    $("#tag-mac").val("");
    $("#tag-kisi").val("");
}

function removeTag(i) {
    $("#hotspot-item-" + i).fadeOut();
    $("#hotspot-" + i).fadeOut();
    ajaxPage("ajaxPage/fotoEtiket.aspx?Cihaz_ID=" + i + "&Islem=Sil");
}

function showTag(i) {
    $("#hotspot-" + i).addClass("hotspothover");
}

function hideTag(i) {
    $("#hotspot-" + i).removeClass("hotspothover");
}


function ajaxPage(sayfa) {
    var html = $.ajax({
        url: sayfa,
        cache: false,
        async: false
    }).responseText;
    //alert(html);
}